<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>webslideshow.dlg.title</title>

	<style TYPE="text/css">
		BODY {
			background: black;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		#slideshow_screen {
			width:100%;
			height:100%;
		}
		#slideshow_loading_screen {
			width:100%;
			height:100%;
		}
		#slideshow_loading_screen_table {
			width:100%;
			height:100%;
		}
		#slideshow_panel_screen {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 100;
			width: 800px;
			height: 100px;
			background: black;
			opacity: 0.5;
			filter: alpha(opacity = 50);
			visibility:hidden;
		}

		#play {
			display: none;
		}

		#play_pause_bottons {
			width: 32px;
		}

		#repeat_bottons {
			width: 32px;
		}

		#repeat_on {
			display: none;
		}

		#shrink_bottons {
			width: 32px;
		}

		#shrink_on {
			display: none;
		}

		#zoom_bottons {
			width: 32px;
		}

		#zoom_on {
			display: none;
		}

		#loading {
			visibility: hidden;
		}
	</style>

	<script src="adapter/WindowArguments.js" language="jscript" type="text/jscript"></script>
	<script src="factory/ComponentsFactory.js" language="jscript" type="text/jscript"></script>
	<script src="factory/Factory.js" language="jscript" type="text/jscript"></script>
	<script src="Logger.js" language="jscript" type="text/jscript"></script>
	<script src="ResourceBundle.js" language="jscript" type="text/jscript"></script>
	<script src="Configuration.js" language="jscript" type="text/jscript"></script>
	<script src="util/Prompt.js" language="jscript" type="text/jscript"></script>
	<script src="util/KeyboardHelper.js" language="jscript" type="text/jscript"></script>
	<script src="util/BrowserDependent.js" language="jscript" type="text/jscript"></script>
	<script src="util/Util.js" language="jscript" type="text/jscript"></script>
	<script src="util/HTMLContentHelper.js" language="jscript" type="text/jscript"></script>
	<script src="util/SaveImageHelper.js" language="jscript" type="text/jscript"></script>
	<script src="util/SlideShowHelper.js" language="jscript" type="text/jscript"></script>
	<script src="WindowManager.js" language="jscript" type="text/jscript"></script>

	<script src="SlideShow.js" language="jscript" type="text/jscript"></script>

	<script language="jscript" type="text/jscript">
		var resourceURL = null;
		try
		{
			resourceURL = yrprxComponentsFactory.createWindowManager().resolveURL("res://{8706081B-A7C0-4EC6-BDFF-A6F54B24A837}/");
		}
		catch(ex) {}

		function closeWindow()
		{
			if (window.arguments.length >= 3 && !!window.arguments[2])
				yrprxBrowser.closeWindow(window.arguments[2]);
			yrprxBrowser.closeWindow();
		}
		function onLoad()
		{
			yrprxHTMLContentHelper.enumerateElementsByTagName(document, "img", function(img) {
				var defaultSrc = img.getAttribute("defalt_image");
				if (defaultSrc) changeImage(img, defaultSrc);
			});
			var panel = document.getElementById("slideshow_panel_screen");
			if (panel)
			{
				panel.style.visibility = "visible";
				panel.style.background = "url('" + resourceURL + "')";
				setPosition(panel, (screen.width-panel.width)/2, (screen.height-panel.height));
			}
			if (navigator.userAgent.indexOf("Windows NT 5") == -1)
			{
				var btnSave = document.getElementById("save");
				if (btnSave) btnSave.style.display = "none"; //TODO: currently we don't support save on VISTA
			}
			// reinit arguments
			gSlideShow.imgSources = window.arguments[0];
			gSlideShow.onLoad();
		}
		function changeImage(img, src)
		{
			img.src = resourceURL + src;
		}
		function setDefaultImage(img)
		{
			changeImage(img, img.getAttribute("defalt_image"));
		}
		function setDefaultImageFor(imageId)
		{
			var img = document.getElementById(imageId);
			if (img) setDefaultImage(img);
		}
		function swapImages(hideImageId,showImageId)
		{
			var hideImage = document.getElementById(hideImageId);
			if (hideImage) hideImage.style.display = "none";
			var showImage = document.getElementById(showImageId);
			if (showImage)
			{
				setDefaultImage(showImage);
				showImage.style.display = "inline";
			}
		}
		function createImage(idx)
		{
			var image = document.createElement("image");
			// set file index
			image.setAttribute("id", "image" + idx);
			image.setAttribute("idx", idx);
			image.style.visibility = 'hidden';
			image.style.position = 'absolute';
			image.style.left = '0px';
			image.style.top = '0px';
			image.style.zIndex = '1';

			return image;
		}

		function setPosition(elem, left, top)
		{
			if (elem)
			{
				elem.style.left = left + 'px';
				elem.style.top = top + 'px';
			}
		}
		function setPositionLeft(elem, left)
		{
			if (elem) elem.style.left = left + 'px';
		}
		function setPositionTop(elem, top)
		{
			if (elem) elem.style.top = top + 'px';
		}
		function setImageSize(img, size)
		{
			img.style.width = size.width + "px";
			img.style.height = size.height + "px";
		}
		function setTooltip(elem, tooltip)
		{
			if (elem) elem.setAttribute("alt", tooltip);
		}
		function onContextMenu()
		{
			// Allow context menu under Vista
			try
			{
				if (navigator.userAgent.indexOf("Windows NT 6") == -1)
					return false;

				var srcElement = window.event.srcElement;

				return ("IMG" == srcElement.tagName) && srcElement.getAttribute("idx") != null;
			}
			catch(ex) {}
			return false;
		}
	</script>

	<script language="jscript" type="text/jscript">
		function showControlPanel()
		{
			try
			{
				var panel = document.getElementById("slideshow_panel");

				if (panel && panel.style.visibility == "hidden")
				{
					var loading = document.getElementById("slideshow_panel_loading");
					if (loading && loading.style.visibility != "hidden")
						loading.style.display = "inline";

					panel.style.visibility = "visible";
				}
			}
			catch(ex)
			{
				if (gSlideShow.logger.enabled) gSlideShow.logger.error("showControlPanel: ", ex);
			}
		}

		function hideControlPanel()
		{
			try
			{
				var panel = document.getElementById("slideshow_panel");
				if (panel) panel.style.visibility = "hidden";
				var loading = document.getElementById("slideshow_panel_loading");
				if (loading) loading.style.diplay = "none";
			}
			catch(ex)
			{
				if (gSlideShow.logger.enabled) gSlideShow.logger.error("hideControlPanel: ", ex);
			}
		}
	</script>

</head>
<body	id="wsshSlideShowDialog"
		full_screen_title="webslideshow.dlg.full.screen.title"
		onkeydown="gSlideShow.onKeyPress(event); return false;"
		onload="onLoad();"
		oncontextmenu="return onContextMenu();"
		ondblclick="closeWindow();"
		onselectstart="return false;"
		>

	<div id="slideshow_screen">

		<div id="slideshow_loading_screen">
			<table id="slideshow_loading_screen_table">
			<tr align="center" valign="middle"><td>
				<img defalt_image="loading.gif"/>
			</td></tr>
			</table>
		</div>

		<div id="slideshow_panel_screen"
				width="800" height="100"
				onmouseover="gSlideShow.onMouseOverPanel(event);"
				onmouseout="gSlideShow.onMouseOutPanel(event);"
				ondblclick="window.event.cancelBubble = true;">

			<div id="slideshow_panel">
				<center>
				<table id="slideshow_panel_bottons" border="0" cellpadding="2" cellspacing="0">
					<tr id="buttons_line" valign="baseline">
					<td>
						<img id="save"
								alt="webslideshow.dlg.save"
								defalt_image="save.gif"
								onmouseover="changeImage(this, 'save_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'save_pushed.gif');"
								onmouseup="changeImage(this, 'save_highlight.gif');"
								onclick="gSlideShow.saveAllImages();"
						/>
					</td>
					<td id="zoom_bottons">
						<img id="zoom_on"
								alt="webslideshow.dlg.do.not.zoom"
								defalt_image="zoom_on.gif"
								onmouseover="changeImage(this, 'zoom_on_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'zoom_on_pushed.gif');"
								onmouseup="changeImage(this, 'zoom_on_highlight.gif');"
								onclick="gSlideShow.toggleZoomMode();"
						/>

						<img id="zoom_off"
								alt="webslideshow.dlg.zoom"
								defalt_image="zoom_off.gif"
								onmouseover="changeImage(this, 'zoom_off_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'zoom_off_pushed.gif');"
								onmouseup="changeImage(this, 'zoom_off_highlight.gif');"
								onclick="gSlideShow.toggleZoomMode();"
						/>
					</td>
					<td id="shrink_bottons">
						<img id="shrink_on"
								alt="webslideshow.dlg.do.not.shrink"
								defalt_image="shrink_on.gif"
								onmouseover="changeImage(this, 'shrink_on_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'shrink_on_pushed.gif');"
								onmouseup="changeImage(this, 'shrink_on_highlight.gif');"
								onclick="gSlideShow.toggleShrinkMode();"
						/>

						<img id="shrink_off"
								alt="webslideshow.dlg.shrink"
								defalt_image="shrink_off.gif"
								onmouseover="changeImage(this, 'shrink_off_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'shrink_off_pushed.gif');"
								onmouseup="changeImage(this, 'shrink_off_highlight.gif');"
								onclick="gSlideShow.toggleShrinkMode();"
						/>
					</td>
					<td id="repeat_bottons">
						<img id="repeat_on"
								alt="webslideshow.dlg.do.not.repeat"
								defalt_image="repeat_on.gif"
								onmouseover="changeImage(this, 'repeat_on_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'repeat_on_pushed.gif');"
								onmouseup="changeImage(this, 'repeat_on_highlight.gif');"
								onclick="gSlideShow.toggleRepeatMode();"
						/>

						<img id="repeat_off"
								alt="webslideshow.dlg.repeat"
								defalt_image="repeat_off.gif"
								onmouseover="changeImage(this, 'repeat_off_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'repeat_off_pushed.gif');"
								onmouseup="changeImage(this, 'repeat_off_highlight.gif');"
								onclick="gSlideShow.toggleRepeatMode();"
						/>
					</td>
					<td>
						<img id="minus"
								alt="webslideshow.dlg.slower"
								tooltip_format="webslideshow.dlg.format.slower"
								defalt_image="minus.gif"
								onmouseover="changeImage(this, 'minus_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'minus_pushed.gif');"
								onmouseup="changeImage(this, 'minus_highlight.gif');"
								onclick="gSlideShow.onSlower();"
						/>
					</td>
					<td>
						<img id="plus"
								alt="webslideshow.dlg.faster"
								tooltip_format="webslideshow.dlg.format.faster"
								defalt_image="plus.gif"
								onmouseover="if (gSlideShow.isEnabledFaster()) changeImage(this, 'plus_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledFaster()) changeImage(this, 'plus_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledFaster()) changeImage(this, 'plus_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.onFaster();"
						/>
					</td>
					<td>
						<img id="first"
								alt="webslideshow.dlg.first"
								defalt_image="first.gif"
								onmouseover="if (gSlideShow.isEnabledShowFirstImage()) changeImage(this, 'first_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledShowFirstImage()) changeImage(this, 'first_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledShowFirstImage()) changeImage(this, 'first_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.showFirstImage();"
						/>
					</td>
					<td>
						<img id="previous"
								alt="webslideshow.dlg.previous"
								defalt_image="previous.gif"
								onmouseover="if (gSlideShow.isEnabledShowPrevImage()) changeImage(this, 'previous_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledShowPrevImage()) changeImage(this, 'previous_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledShowPrevImage()) changeImage(this, 'previous_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.showPrevImage();"
						/>
					</td>
					<td id="play_pause_bottons">
						<img id="pause"
								alt="webslideshow.dlg.pause"
								defalt_image="pause.gif"
								onmouseover="changeImage(this, 'pause_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="changeImage(this, 'pause_pushed.gif');"
								onmouseup="changeImage(this, 'pause_highlight.gif');"
								onclick="gSlideShow.onPause();"
						/>

						<img id="play"
								alt="webslideshow.dlg.slideshow"
								defalt_image="play.gif"
								onmouseover="if (gSlideShow.isEnabledPlay()) changeImage(this, 'play_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledPlay()) changeImage(this, 'play_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledPlay()) changeImage(this, 'play_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.onPlay();"
						/>
					</td>
					<td>
						<img id="next"
								alt="webslideshow.dlg.next"
								defalt_image="next.gif"
								onmouseover="if (gSlideShow.isEnabledShowNexImage()) changeImage(this, 'next_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledShowNexImage()) changeImage(this, 'next_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledShowNexImage()) changeImage(this, 'next_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.showNextImage(true);"
						/>
					</td>
					<td>
						<img id="last"
								alt="webslideshow.dlg.last"
								defalt_image="last.gif"
								onmouseover="if (gSlideShow.isEnabledShowLastImage()) changeImage(this, 'last_highlight.gif');"
								onmouseout="setDefaultImage(this);"
								onmousedown="if (gSlideShow.isEnabledShowLastImage()) changeImage(this, 'last_pushed.gif');"
								onmouseup="if (gSlideShow.isEnabledShowLastImage()) changeImage(this, 'last_highlight.gif'); else setDefaultImage(this);"
								onclick="gSlideShow.showLastImage();"
						/>
					</td>
					</tr>
				</table>
				<div id="slideshow_panel_loading">
					<img id="loading" defalt_image="loading.gif"/>
				</div>
				</center>
			</div>

		</div>

	 </div>
</body>
</html>
